<!--订单列表-->
<style scoped lang="less">
.checkbox-item{
  display: inline-block;  
  position: relative;
}
.checkbox-item label{
  line-height: 34px;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  visibility: hidden;
}
/* 设计新的checkbox，位置 */
.checkbox-item label:BEFORE {
  content: '';
  position: absolute;
  top: 25px;;
  left: 0px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
}
/* 点击初始的checkbox，将新的checkbox关联起来 */
.checkbox-item input[type="checkbox"]:checked +label:BEFORE {
  content: '\2713';
  display: block;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  background-color: #1890FF;
    color: #ffffff;
}

.msg {
    width: 5.5rem;
}
.gridbg {
  background-color: #fefefe;
}
.scroller-wrap {
    top: 65px;
    height: 750px !important;
}
.order-list {
  .todo {
    height:0.86rem; 
    line-height:0.86rem; 
    padding:0 0.2rem;
    .tag {
      height:0.56rem;
      line-height: 0.56rem;
      padding:0 0.2rem;
      margin-left: 0.1rem;
      background:#ff7202;
      color:#fff;
      border-radius: 0.28rem;
    }
  }
  .list-order-warp{
    background: #fff;
    .title {
      padding:10px;
      color:#888;
      font-size:14px; 
      border-bottom:1px solid #ebebeb;
    }
    .con {
      padding: 0.1rem 0.2rem;
      border-bottom: 1px solid #ebebeb;
      .cargo {
        margin: 0.1rem;
        height: 1.3rem;
        width:1.3rem;
        text-align: center;
        border-radius: .08rem;
        background: #edf8f8;
        overflow: hidden;
        i {
          display: block;
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #77babd;
        }
        p {
          height: .3rem;
          line-height: .3rem;
          font-size: .2rem;
          color: #fff;
          background: #77babd;
        }
      }
      .msg {
        margin-left:0.2rem;
        font-size:13px;
        line-height: 0.5rem;
      }
    }
    .btn-grp {
      padding:0.1rem 0.2rem 0.1rem 0;
      text-align: right;
      .btn{
        margin-left: 0.1rem;
      }
    }
  }
}
</style>


<template>
  <div class="contain order-list">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入业务单号" v-model="sechTxt">
          </div>
        </div>
      </div>
      <div class="m-sech-btn" @click="goLink()">搜索</div>
    </div>
      <!-- <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'customDelivery', tabNo: this.tabNo}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '请输入单号'}}</div>
          </div>
        </router-link>
      </div> -->
      <!--tab--> 
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-167" class='scroller-wrap' @on-pullup-loading="getData" v-if="todolist.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="list-order-warp mb30" v-for="item in todolist">
          <div class="title">
            业务单号：{{item.BBillNo}}
            <!-- <em class="org f-r ft12">{{ (item.Information && item.Information !== ''?'Err': item.State) | PoState}}</em> -->
          </div>
          <div class="displayflex con"><!--  v-on:click="goToPath('/order/orderDetail', item, 1)" -->
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.Pkgs}}件</p>
            </span>
            <div class="msg">
              <p v-if="item.Information && item.Information !== ''" class="ft15"><i class="llse llse-yichang ft15 red"></i>{{item.SendContactsTel}}</p>
              <p>单据时间：{{item.BillDate | time}}</p>
              <p>收货联系人：{{item.SendContacts}}&nbsp<span class="flex1" v-if="item.SendContactsTel">{{item.SendContactsTel}}<a :href="'tel:' +  item.SendContactsTel " class="iconfont icon-phone org ml10"></a></span></p>
              <p>收货单位：{{item.CargoOwnerName}}</p>
              <!-- <p v-if="tabNo == 1">承运商：{{item.DepartureDate | time}}</p>
              <p v-if="tabNo == 1">物流单号：{{item.DepartureDate | time}}</p>
              <p v-if="tabNo == 0">排车单号：{{item.DepartureDate | time}}</p>
              <p v-if="tabNo == 0">车辆：{{item.DepartureDate | time}}</p> -->
            </div>
            <div class="checkbox-item" >
                  <input :name="item.Guid" :id="item.Guid" type="checkbox" :value="item.Guid"  v-model="checkModel" />
                  <label class="checkbox-label" :for="item.Guid"></label>
              </div>
              <!-- <span class="mint-checkbox" v-if="item.WhWorkState === 'R34'">
                <input type="checkbox" class="mint-checkbox-input" :value="item.Guid" name='checkboxinput' v-model="checkModel" checked> 
                <span class="mint-checkbox-core"></span>
              </span> -->
              
          </div>
          <div class="btn-grp">
            <div class="btn" v-on:click="goToPath('/order/orderDetail', item, 1)">详情</div>
            <div class="btn" v-on:click="relation()">关联设备</div>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='2'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
import { mapState } from 'vuex';
export default {
  name:'delivery',
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',
      todolist:[],
      tabNo:-1,
      threshold:4,
      checkModel: [],
      pgSize:8,

      stateList:[],

      PageIndex: 1,
      PageSize:8,
      totalRecords:0,
      noMore:false,
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    }
  },
  watch: {
    tabNo(n,o){
      this.stateList = [];
      switch (n) {
        case 0:
          this.stateList = [];
          break;
        case 1:
          this.stateList = [];
          break;
        case 2:
          this.stateList = ["12"];
          break;
        case 3:
          this.stateList = ["52", "53", "56"];
          break;
        case 4:
          this.stateList = ["81"];
          break;
        case 5:
          this.stateList = [];
          break;
      }
      this.goLink();
    }
  },
  created(){
    this.$nextTick(()=>{
      this.sechTxt = sessionStorage.sechtxt;
      if(sessionStorage.getItem('ConsumableTab')){
        this.tabNo = sessionStorage.getItem('ConsumableTab')*1;
        sessionStorage.removeItem('ConsumableTab')
      } else {
        this.tabNo = 0;
      }
    })
  },
  mounted() {
  },
  methods: {
    relation(){
      sessionStorage.clear();
      sessionStorage.OrderCheckitem = JSON.stringify(this.checkModel);
      console.log(this.checkModel);
      if (this.checkModel.length==0) {
         this.Toast({
              message: '请选择订单进行设备关联！',
          });
          return;
      }
      console.log(this.checkModel);
      this.$router.push({
        path:'/relation',
        query:{
        }
      })
    },
    goLink(){
      sessionStorage.removeItem('sechtxt');
      this.getData(1);
    },
    getData(type){
      this.todolist = [];
      if (type == 1) {
        this.PageIndex = 1;
        this.Page = 0;
      }
      let query = {
          BBillNo: this.sechTxt,
          statelist: this.stateList,
          Page: this.Page,
          TPWareHouseCorpGuid: this.userinfo.BelongGuid,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
          Rows: this.PageSize,
          WhWorkState: "R34",
          IsCCBB: "Y"
        };
      if(this.tabNo !== 0){
        query.ExceptionMark = 'N';
      }
      if(this.tabNo === 5) {
        query.ExceptionMark = 'Y';
      }
      this.Ajax.post('SearchTRTPLBBApi',query).then((res) => {
        if (res.IsSuccess) {
          this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.todolist = this.todolist.concat(res.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    goToPath(url, item, type){
      let query = {};

      //订单详情
      if(type === 1){
        query = {
          BBGuid: item.Guid,
        }
      }
      //订单进度
      if(type === 2){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 1
        }
      }
      //配送详情
      if(type === 3){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 2
        }
      }

      //配送详情
      if(type === 4){
        query = {
          BBGuid: item.Guid,
        }
      }

      this.$router.push({
        path: url,
        query: query,
      })

    },
    gotoDet(value){
      // sessionStorage.item = JSON.stringify(value);
      this.$router.push({
        path:'/order/acceptDetail',
        query:{
          id:value.Guid
        }
      })
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>